<template>
  <view style="background-color: #fff; padding-top: 1upx" class="bd">
    <view
      style="
        padding: 30upx;
        background-color: #fff;
        font-size: 36upx;
        font-weight: 900;
        color: #555;
        margin: 2upx 0 20upx;
      "
      class="bd1 t1"
      >{{ detail.vaccinesName }}</view
    >
    <view class="title">
      <text class="txt">疫苗分类</text>
    </view>
    <view class="art">{{ detail.vaccinesType == "1" ? "免费" : "自费" }}</view>
    <!-- 开关 -->
    <!-- <view style="padding: 40upx;background-color: #fff;margin: 0 0 20upx;">
			<view style="margin-bottom: 20upx;">
				<u-tag text="完成状态" type="success" style="background-color: #18C7E1;color: #fff;"/>
			</view>
			<view class="flex flex-j-b flex-al-c uni-item-line" style="padding: 20upx 0;">
				<view>是否完成</view>
				<u-switch v-model="checked1" active-color="#18C7E1" inactive-color="#eee"></u-switch>
			</view>
		</view> -->
    <view class="title">
      <text class="txt">预防疾病</text>
    </view>
    <view class="art">{{ detail.diseasePrevention }}</view>
    <view class="title">
      <text class="txt">接种对象以及时间</text>
    </view>
    <view class="art">{{ detail.recommend }}</view>
    <view class="title">
      <text class="txt">注意事项</text>
    </view>
    <view class="art" v-html="detail.tips"></view>
    <!-- 		detail.vaccinesType == '2' && detail.types == '0' && nostockstate == 0 -->
    <view
      class="storeBtn"
      style="margin: 80upx 0; text-align: center"
      v-if="detail.types == '0' && nostockstate == 0&&(isopen=='0'||isopen=='undefined')"
    >
      <!-- <u-button type="primary" size="medium" style="background: #F4D233;" 
				@tap="isShowTips=true">{{detail.types==0?'无库存':'库存不足'}}</u-button> -->
      <u-button
        type="primary"
        size="medium"
        style="background: #f4d233"
        @tap="isShowTips = true"
        >无库存</u-button
      >
      <view
        v-show="detail.types == 0||isopen=='0'"
        style="
          text-align: center;
          color: #007aff;
          padding: 10upx;
          box-shadow: 0 0 10upx 0 #ccc;
          width: 50%;
          margin: 10upx auto 0;
        "
      >
        请点击上方按钮查看其它社区该疫苗库存情况</view
      >
      <view class="tips" v-if="isShowTips">
        当前该疫苗库存不足，此预约无法保证疫苗接种，请提前电话联系所属社区，
        询问疫苗库存情况或替代方案，社区联系方式详见健康管理页面社区简介-->
        <text style="color: #007aff" @tap="goHealth">点此跳转</text>
        <view class="flex" style="margin: 30upx 0 0">
          <u-button type="primary" size="mini" @tap="goCommunity"
            >查看库存</u-button
          >
          <u-button type="" size="mini" @tap="isShowTips = false"
            >取消</u-button
          >
        </view>
      </view>
      <u-button
        type="primary"
        size="medium"
        v-if="detail.adequate != 2"
        style="background: #24d5ea; margin-top: 20upx"
        @click="yyuedj"
        >需求登记</u-button
      >
    </view>
	<view    v-if="isopen=='1'&&kucuninfo==2"  >
		<u-button
		  style="background-color: rgb(179, 179, 179); color: rgb(255, 255, 255);margin: 20px;"
		>
		  暂未开通需求登记
		</u-button>
		
	</view>
    <view v-show="type != 1 && detail.types == '1'">
      <view
        style="margin: 80upx 20upx"
        v-if="detail.types == '1' && state != 1"
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <u-button
          style="background-color: rgb(24, 199, 225); color: rgb(255, 255, 255)"
          @click="goCalendar()"
        >
          预约
        </u-button>
      </view>
      <view
        style="margin: 80upx 20upx"
        v-if="detail.vaccinesType == '2' && state == 1"
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <!-- 				<u-button style="background-color: rgb(166, 166, 166);
    color: rgb(255, 255, 255);" disabled>
					已预约
				</u-button> -->
      </view>
    </view>

    <view v-show="type != 1 && detail.types == '0'">
      <view
        style="margin: 80upx 20upx"
        v-if="detail.types == '0' && state != 1 && nostockstate == 1"
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <u-button
          style="background-color: rgb(24, 199, 225); color: rgb(255, 255, 255)"
          @click="goCalendar()"
        >
          预约
        </u-button>
      </view>
      <view
        style="margin: 80upx 20upx"
        v-if="detail.vaccinesType == '2' && state == 1"
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <!-- 				<u-button style="background-color: rgb(166, 166, 166);
		color: rgb(255, 255, 255);" disabled>
					已预约
				</u-button> -->
      </view>
    </view>

    <!-- 底部弹出层 -->
    <u-popup v-model="popup" mode="bottom">
      <view>
        <!-- 人生若只如初见，何事秋风悲画扇 -->
        <view class="inp-group flex flex-al-c">
          <view class="inp-title">身高(CM)</view>
          <u-input
            v-model="child.height"
            type="text"
            :border="true"
            placeholder="请输入身高"
          />
        </view>
        <view class="inp-group flex flex-al-c">
          <view class="inp-title">体重(KG)</view>
          <u-input
            v-model="child.weight"
            type="text"
            :border="true"
            placeholder="请输入体重"
          />
        </view>
        <view class="inp-group flex flex-al-c">
          <view class="inp-title">头围</view>
          <u-input
            v-model="child.frontalFontanel"
            type="text"
            :border="true"
            placeholder="请输入头围"
          />
        </view>
        <view class="inp-group flex flex-al-c">
          <view class="inp-title">视力</view>
          <u-input
            v-model="child.vision"
            type="text"
            :border="true"
            placeholder="请输入视力"
          />
        </view>

        <view style="width: 90%; margin: 50upx auto 50upx">
          <button
            type="default"
            style="background: #18c7e1; color: #fff"
            @tap="subUserInfo"
          >
            保存
          </button>
        </view>
      </view>
    </u-popup>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      title="确认登记信息"
      :async-close="true"
      :show-cancel-button="true"
    >
      <view style="padding: 25upx">
        <view>预约门诊：{{ sqname }}</view>
        <view>登记疫苗：{{ detail.vaccinesName }}</view>
        <view>需求登记须知：</view>
        <view style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >①请注意查看预约门诊所发布的可预约通知信息 <br />
          ②门诊发布可预约通知后，请及时在效期内预约，避免超期无法预约<br />
          ③如超期无法预约，请重新需求登记排队 <br
        /></view>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      type: "",
      detail: {},
      vtype: "", // 疫苗类型
      checked1: false,
      popup: false,
      sqname: "", //社区名字
      planId: "", //planId
      vPid: "",
      child: {
        height: "",
        weight: "",
        frontalFontanel: "", // 头围
        vision: "", // 视力
      },

      isShowTips: false,
      state: "",
      nostockstate: "", //二类苗无库存已通知预约
      showConfirm: false,
	  isopen:'' ,//是否开通预约
	  kucuninfo:''//库存信息
    };
  },
  onLoad(options) {
    console.log(options);
    this.id = options.id;
    this.type = options.type;
    this.sqname = options.sq || this.$store.state.sqname;
    this.planId = options.planId;
    this.vtype = options.vtype;
    this.vPid = options.vPid ? options.vPid : "";
	this.isopen= options.isopen
	this.kucuninfo = options.kcun
    this.getPlanDetail();
    this.goDatas();
  },
  onShow() {
    this.goCalendar2();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    goDatas() {
      this.config
        .get("/appointment/erClassVaccNoStock", {
          vid: this.id,
          planId: this.planId,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            this.nostockstate = res.data.data.state;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    goCalendar() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/subscribesInfos/ifCanSub", {
          planType: 1,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            if (res.data.data.state == 0 || res.data.data.state == 2) {
              uni.navigateTo({
                url:
                  "/pages/main/child/backlog/calendar?type=1&name=预约接种&sq=" +
                  this.sqname +
                  "&planid=" +
                  this.planId +
                  "&vtype=" +
                  this.vtype +
                  "&vid=" +
                  this.id +
                  "&vPid=" +
                  this.vPid,
              });
            } else {
              uni.showToast({
                title: "你已预约接种，请勿重复预约",
                icon: "none",
              });
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    goCalendar2() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/subscribesInfos/ifCanSub", {
          planType: 1,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            if (res.data.data.state == 0 || res.data.data.state == 2) {
              this.state = 2;
            } else {
              this.state = 1;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    //去预约登记
    yyuedj() {
      // this.showConfirm = true
      this.config
        .post("/appointment/appointmentRegistrations", {
          vid: this.id,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            if (res.data.msg == 1) {
              this.showConfirm = true;
            } else if (res.data.msg == 2) {
              uni.showToast({
                title: "当前社区暂未开通接种科室",
                icon: "none",
              });
            } else {
              uni.showToast({
                title: "你已登记该疫苗，请勿重复操作",
                icon: "none",
              });
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
            this.showConfirm = false;
          }
        });
    },
    confirm() {
      //弹框的确认
      let self = this;
      this.config
        .post("/appointment/appointmentRegistration", {
          vid: this.id,
        })
        .then((res) => {
          if (res.data.code === 200) {
            uni.showToast({
              title: res.data.msg,
            });
            setTimeout((s) => {
              uni.navigateBack();
            }, 500);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
            this.showConfirm = false;
          }
        });
    },
    getPlanDetail() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/vaccinesBasicsInfo/findById", {
          vaccinesId: this.id,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.detail = res.data.data;
            //console.log(self.detail)
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 点击是否上传
    checked1Change() {
      if (this.checked1) {
        this.popup = true;
      }
    },
    subUserInfo() {
      this.popup = false;
    },
    // 去门诊通告
    goAnnu() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/annunciate",
      });
    },
    showToast() {
      this.$refs.uToast.show({
        title: "请点击上方按钮查看其它社区该疫苗库存情况",
        type: "primary",
        duration: 100000,
        position: "bottom",
      });
    },
    goHealth() {
      uni.switchTab({
        url: "/pages/health/health",
      });
    },
    goCommunity() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/community-list?vid=" + this.id,
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;

  .inp-title {
    width: 200upx;
  }
}

.storeBtn {
  position: relative;

  .tips {
    position: absolute;
    bottom: 100%;
    width: 500upx;
    left: 50%;
    margin: 0 0 10upx -250upx;
    color: #333;
    padding: 40upx 40upx;
    box-shadow: 0 0 10upx 0 #999;
    background-color: #fff;
    border-radius: 10upx;
    text-align: left;
  }
}

.title {
  padding: 20upx 50upx;
  background-color: #eee;

  .txt {
    padding: 0 20upx;
    border-left: 8upx solid #18c7e1;
  }
}

.art {
  padding: 30upx 50upx;
  line-height: 46upx;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }

  .title {
    background-color: #000000 !important;
    color: #ccc !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .art {
    color: #ccc !important;
  }

  >>> span {
    color: #ccc !important;
  }
  >>> p {
    background-color: #1b1c1e !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>
